<template>
	<view class="container">
		<header class="banner-container" @longtap="copyToken">
			<view class="header-scroll">
				<span>{{userName}}</span>，欢迎您进入直播课堂
			</view>
		</header>
		<mescroll-body  @init="mescrollInit" :down="downOption" :up="upOption">
			<view class="class-list">
				<view class="class-item" v-for="(item, index) in timeTables" :key="index">
					<view class="class-item-main">
						<view class="class-item-content">
							<div class="img-border">
								<div class="img-cover"></div>
								<image :src="item.coverImage" class="image" mode="widthFix" @tap.stop="goToItem(0, item)"></image>
								<view v-if="item.classStatus == 1" class="play-border" @tap.stop="goToItem(0, item)">
									<view class="play-icon" :style="{backgroundColor: theme.danger}"></view>
								</view>
							</div>
							<view class="class-item-courseName">
								<view class="cursor-item">
									<view class="cursor-name" :style="{color:theme.primary}"><span>课程名称</span>: {{ item.courseName }}</view>
									<view v-if="item.lastUpdateDateTime" class="cursor-name">{{item.lastUpdateDateTime}}更新</view>
								</view>
								<view v-if="item.dateTime" class="cursor-time" :style="{color:theme.primary}"><span>上课时间</span>: {{ item.dateTime }}</view>
								<view class="teacher-name" :style="{color:theme.primary}"><span>任课老师</span>: {{ item.teacherName }}</view>
							</view>
							<view 
								v-if="item.onDateTime" 
								class="class-item-status" 
								:style="{background: classStatus(item.classStatus)}">
								{{ item.onDateTime }}
							</view>						
						</view>
						<!-- 公开课 -->
						<view v-if="item.isOpen" class="bottom-area">
							<view class="class-item-buttons">
								<view class="button-item" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goToItem(1, { classStatus: 2, classId: item.classId, courseName: item.courseName, isOpen: true })">课程回放</view>
							</view>
						</view>
						<!-- 普通课程 -->
						<view v-else class="bottom-area">
							<view class="class-item-buttons">
								<view class="button-item" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goToItem(1, { classStatus: 2, classId: item.classId, courseName: item.courseName})">课程回放</view>
								<view class="button-item" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goToDiscuss(item)">班级交流</view>
							</view>
							<view class="class-item-buttons">
								<view class="button-item" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goOutLine(item, 1, 2)">预习区</view>
								<view class="button-item" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goOutLine(item, 2, 3)">作业区</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="fixed-mine" :style="{backgroundColor: theme.primary}" @tap="goMeiPianList">我的</view>
		<view class="fixed-search" :style="{backgroundColor: theme.primary}" @tap="showPop = true">搜索</view>
		<yxyl-pop :show="showPop" @maskClick="showPop = false">
			<view class="pop-content">
				<input v-model="searchVal" placeholder="请输入课程名或老师名" maxlength="50"/>
				<view 
				class="button-item" 
				:style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goSearch">
					搜索
				</view>
			</view>
		</yxyl-pop>
	</view>
</template>

<script>
import MescrollBody from 'mescroll-uni/mescroll-body.vue';
import MescrollMixin from "mescroll-uni/mescroll-mixins.js";
import yxylPop from '@/components/yxyl-pop/yxyl-pop.vue';
export default {
	mixins: [MescrollMixin],
	components: { MescrollBody, yxylPop },
	data() {
		return {
			theme: this.$theme,
			userName: '',
			initList: [],
			timeTables: [],
			downOption: {
				use: false, // 是否启用下拉刷新; 默认true,
				auto: false,
				native:false
			},
			//上拉加载的常用配置
			upOption: {
				use: false, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: false,
				textNoMore: '---没有了---'
			},
			showPop: false,
			searchVal: '',
			allowReachBottom: true
		};
	},
	computed:{
		classStatus:function(){
			return function(status){
				switch(status){
					case 1:
						return this.theme.danger
					case 2:
						return this.theme.warning
					case 3:
						return this.theme.info
				}
			}
		}
	},
	onLoad() {
		this.getTimeTables().then(resp=>{
			this.initList = resp;
			this.timeTables = this.getList(-1, 20);
		})
		let timer = ''
		timer = setInterval(()=>{
			this.userName = this.$store.state.user.clientUserName
			if(this.userName){
				clearInterval(timer)
			}
		}, 100)
	},
	// 上划加载
	onReachBottom() {
		if(this.allowReachBottom){
			this.timeTables = [...this.timeTables, ...this.getList(this.timeTables.length, 20)];
		}
	},
	//下拉刷新
	onPullDownRefresh(){
		this.timeTables = this.getList(-1, 20);
		this.allowReachBottom = true;
		uni.stopPullDownRefresh();
	},
	methods: {
		// 拷贝token
		copyToken(){
			uni.setClipboardData({
			    data:  `Bearer ${this.$store.state.user.token}`,
				success() {
					uni.hideToast()
				}
			})
		},
		// 搜索
		goSearch(){
			if(!this.searchVal){
				this.timeTables = this.getList(-1, 20);
			}else{
				this.timeTables = this.initList.filter(item=>item.courseName.indexOf(this.searchVal)!=-1 || item.teacherName.indexOf(this.searchVal) != -1);
			}
			this.showPop = false;
			this.allowReachBottom = false;
			this.searchVal = "";
			this.mescroll.scrollTo(0)
		},
		// 数组分页
		getList(start, count){
			return this.initList.filter((item, index)=>index > start && index <=start + count);
		},
		getTimeTables() {
			return this.$http.request({
				url: 'api/LivePlayer/GetTimeTables'
			})
		},
		goToDiscuss(e) {
			uni.navigateTo({
				url: '../discussGroup/discuss/discuss?discussGroupId=' + e.courseId + '&labelId=' + e.classId
			});
		},
		goToItem(dist, data) {
			if (data.classStatus == 1) {
				uni.navigateTo({
					url: `./video?Id=${data.id}&courseName=${data.courseName}&isOpen=${data.isOpen}`
				});
			} else if (data.classStatus == 2 || data.classStatus == 3) {
				// dist: 明细列表页点击存在直播课的项目是否跳转直播页面 0: 不可跳转 1: 可跳转
				uni.navigateTo({
					url: `./time_table_list?Id=${data.classId}&courseName=${data.courseName}&dist=${dist}&isOpen=${data.isOpen || ''}`
				})
			}
		},
		//预习区、作业区
		goOutLine(e, tabIndex, dist) {
			uni.navigateTo({
				url: `./time_table_list?Id=${e.classId}&courseName=${e.courseName}&dist=${dist}&tabsIndex=${tabIndex}`
			})
		},
		//我的
		goMeiPianList() {
			uni.navigateTo({
				url: `../meiPianList/meiPianList?hostId=${this.$store.state.user.clientUserId}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container{
	border-top: 1rpx solid #eee;
}
.fixed-mine, .fixed-search {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 10rpx;
	font-size: 30rpx;
	z-index: 999;
}

.fixed-mine{
	top: 50rpx;
}
.fixed-search{
	top: 180rpx;
}

.pop-content{
	padding: 20rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	font-size: 30rpx;
	.button-item{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		color: #fff;
	}
}

.title {
	display: flex;
	justify-content: center;
	padding: 10rpx 0;
	color: #808080;
}

.banner-container:active{
	background-color: #eee;
}
.banner-container{
	width: 100vw;
	margin-bottom: 80rpx;
	transition: background-color linear .3s;
	overflow: hidden;
	@keyframes header-scroll{
		from{transform: translateX(100%)}
		to{transform: translateX(-100%)}
	}
	.header-scroll{
		width: 100%;
		padding: 10rpx;
		font-size: 28rpx;
		color: #4a4a4a;
		white-space: nowrap;
		overflow: hidden;
		animation: header-scroll 8s linear infinite;
	}
}

.class-list {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	.class-item {
		display: flex;
		flex-direction: column;
		margin: 30rpx 0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		.class-item-main {
			border: 1px solid #e7e6eb;
			border-radius: 20rpx;
			.class-item-content {
				position: relative;
				border-bottom: 1px solid #e7e6eb;
				display: flex;
				flex-direction: column;			
				.img-border {
					position: relative;
					.image {
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;
						width: 100%;
					}
					.img-cover{
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						z-index: -1;
						opacity: 0;
						transition: background-color .3s, opacity .3s;
					}
					
					.play-border{
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						.play-icon{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							position: relative;
						}
						.play-icon::after{
							content: "";
							position: absolute;
							left: 38%;
							top: 32%;
							width: 0;
							height: 0;
							border-top: 20rpx solid transparent;
							border-left: 35rpx solid #fff;
							border-bottom: 20rpx solid transparent;
							border-right: 35rpx solid transparent;
						}
					}
				}
				.img-border:active .img-cover {
					z-index: 0;
					background-color: #1b1b1b;
					opacity: 0.5;
				}

				.class-item-courseName {
					padding: 5rpx 15rpx;
					font-weight: bold;
					.cursor-item{
						display: flex;
						justify-content: space-between;
					}
					.cursor-name, .cursor-time, .teacher-name{
						padding: .6vw 0;
						font-size: 28rpx;
					}
				}
				.class-item-status {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
					border-radius: 5px;
					color: #ffffff;
					padding: 5rpx 10rpx;
					z-index: 9;
				}
			}
			.bottom-area{
				padding: 10rpx 0;
				.class-item-buttons {
					display: flex;
					width: 100%;
					padding: 5px 0;
					justify-content: space-around;
					.button-item {
						width: 35%;
						text-align: center;
						font-size: 30rpx;
						padding: 10rpx;
						border-radius: 15rpx;
						color: #fff;
					}
					.noActive{
						filter: grayscale(80%);
					}
				}
			}
		}
	}
}
</style>
